// include styles from the ui package
@use "./vars.scss";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1,
  .ztdl-h1 {
    @apply text-center text-2xl;
  }

  .ztdl-p {
    @apply text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500;
  }
}

html {
  --background-color: #ffffff;
  --dark-background-color: #000000;
}

.form-checkbox:checked {
  background-image: url("/checkbox.svg");
}

.skeleton {
  --accents-2: var(--theme-light-background-400);
  --accents-1: var(--theme-light-background-500);

  background-image: linear-gradient(270deg, var(--accents-1), var(--accents-2), var(--accents-2), var(--accents-1));
  background-size: 400% 100%;
  animation: skeleton_loading 8s ease-in-out infinite;
}

.dark .skeleton {
  --accents-2: var(--theme-dark-background-400);
  --accents-1: var(--theme-dark-background-500);

  background-image: linear-gradient(270deg, var(--accents-1), var(--accents-2), var(--accents-2), var(--accents-1));
  background-size: 400% 100%;
  animation: skeleton_loading 8s ease-in-out infinite;
}

@keyframes skeleton_loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
